<template>
	<view>
		<view class="left" @click="onleft"></view>
		<view class="patien-item" v-for="v in patientList">
			<view class="item">
				<van-swipe-cell>
					<view class="ii">
						<view class="item-up">
							姓名: <text class="name">{{v.name}}</text>
						</view>
						<view class="item-down">
							<view class="agesex">
								年龄: <text class="age">{{v.age}}</text>
								性别: <text class="sex">{{v.sex==true? '男':'女'}}</text>
							</view>
							<view class="idNumber">
								就诊卡号: <text class="num">{{v.idNumber}}</text>
							</view>
						</view>
					</view>
					<template #right>
						<van-button square text="删除" type="danger" class="delete-button"
							@click="ondelete(v.id)" />
					</template>
				</van-swipe-cell>
				
			</view>
		</view>
		<view class="btn" @click="toadd"> 添加就诊人 </view>
	</view>
</template>

<script setup>
	import {SwipeCell} from 'vant';
	import api from '../../lib/request';
	import {ref} from 'vue'
	let patientList = ref([])
	import {user} from '../../pinia/user.js'
	const User = user()
	// 点击了返回
	const onleft = ()=>{
		uni.reLaunch({
			url:'/pages/mine-page/mine-page'
		})
	}
// 获取绑定的所有就诊人信息
	api.get('/user/patient').then(res => {
			if(res.data.length){
				patientList.value = res.data
				User.updatePatientCard(res.data)
			}
	})

	// 点击了删除
	const ondelete = async (id)=> {
			let res =await  api.del(`/user/patient?id=${id}`) 
			let mm = []
			if (res.code) {
				mm  = patientList.value.filter(item => item.id != id)
			}
			patientList.value = mm
			User.updatePatientCard(mm)
	}
	
	// 去添加
	const toadd = function(){
		uni.navigateTo({
			url:'/views/addpatient/addpatient'
		})
	}
</script>

<style lang="scss" scoped>
	.left{
		width: 27px;
		    height: 27px;
		    position: fixed;
		    top: 9px;
		    z-index: 99999;
		    left: 10px;
		
	}
	.goods-card {
		margin: 0;
		background-color: #fff;
	}

	.delete-button {
		height: 100%;
	}

	.name {
		font-weight: bold;
	}

	.item {
		width: 100vw;
		background-color: #e4f5ff;
		box-sizing: border-box;
		margin-bottom: 10px;
	}

	.ii {
		width: calc(100vw - 92px);
		box-sizing: border-box;
		padding: 10px;
	}

	.agesex {
		margin: 5px 0;
	}

	.age {
		margin-right: 20px;
	}

	.num {
		font-weight: bold;
		color: #2323ddba;
	}
	.btn{
		position: fixed;
		bottom:0;
		width:100vw;
		height: 50px;
		line-height: 50px;
		text-align: center;
		color:#fff;
		background-color: #2323ddba;
	}
</style>